/*
 * @Author: xiaosihan 
 * @Date: 2024-08-06 11:14:24 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 23:39:48
 */


import { Button, Input, message, Modal, Switch } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./projectshareModal.module.less";
import projectShareModalStore from "./projectShareModalStore";

interface Iprops {
    projectId: string;
}

// 分享链接
export default function ProjectShareModal(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [messageApi, contextHolder] = message.useMessage();
    const [show, setShow] = useState(projectShareModalStore.show);
    const [shareToken, setShareToken] = useState(projectShareModalStore.shareToken);
    const [shareId, setShareId] = useState(projectShareModalStore.shareId);
    const [openShare, setOpenShare] = useState(projectShareModalStore.openShare);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShow(projectShareModalStore.show);
        setShareId(projectShareModalStore.shareId);
        setShareToken(projectShareModalStore.shareToken);
        setOpenShare(projectShareModalStore.openShare);
    }, { delay: 30 }), []);

    // 分享链接
    const share_link = async () => {
        const shareLink = `${origin}/#/projectDatail/${shareToken}`;
        navigator.clipboard.writeText(shareLink);
        messageApi.success("分享链接已复制到剪贴板!");
    }

    return (
        <Modal
            width={600}
            open={show}
            onCancel={() => {
                projectShareModalStore.setShow(false);
            }}
            maskClosable={false}
            centered={true}
            footer={false}
            title="邀请成员"
            className={styles.ant_model}
        >
            {contextHolder}
            <div className={styles.projectShareModal} >
                <div className={styles.lable} >邀请链接</div>
                <div className={styles.input} >
                    <Input value={shareToken ? `${origin}/#/projectDatail/${shareToken}` : "暂未开启"} readOnly />
                    <br />
                    <br />
                    <Switch
                        size="small"
                        value={openShare}
                        onChange={async v => {
                            if (v) {
                                await projectShareModalStore.addShare();
                            } else {
                                await projectShareModalStore.closeShare();
                            }
                        }}
                    />&nbsp;&nbsp;协作链接开启
                </div>
                <div className={styles.btn} >
                    <Button type="primary" onClick={() => share_link()} disabled={!shareToken} >复制链接</Button>
                </div>
            </div>
        </Modal>
    );

}